<template>
  <div class="son">
    <h3>我是son组件</h3>
    {{ msg }}
    <el-button @click="changeValue(1, 2, 3, $event)">改变msg的值</el-button>
    <el-button @click="emitValue">改变父组件的值</el-button>
  </div>
</template>

<script setup lang="ts" name="son">
//接收父组件的值
let props = defineProps(["msg"]);

//emit的写法
const $emit = defineEmits(["on-change"]);

/**
 * 改变msg
 */
const changeValue = (a, b, c, event) => {
  console.log("props", props);
  console.log("a,b,c,event", a, b, c, event);
};

/**
 * 触发父组件
 */
const emitValue = () => {
  $emit("on-change", "111");
};
</script>

<style scoped lang="scss">
.son {
  height: 200px;
  width: 400px;
  background: red;
}
</style>
